<template>
	<view class="content">
		<view class="form-wrap" v-if="!renzstatus">
			<view class="form-item">
				<view class="label">
					<text>姓名</text>
				</view>
				<view class="input-wrap">
					<input v-model="form.name" type="text" placeholder="请填写您的姓名" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>手机号</text>
				</view>
				<view class="input-wrap">
					<input v-model="form.tel" type="number" placeholder="请填写您的手机号" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>职业</text>
				</view>
				<view class="input-wrap">
					<input v-model="form.occupation" type="text" placeholder="请填写您的职业" />
				</view>
			</view>
			<!-- <view class="form-item upload">
				<view class="label">
					<text>上传证件（心理咨询师证，情感师证，其他平台开播截图）</text>
				</view>
				<view class="upload-wrap">
					<view class="image-wrap" @click="upload(1)">
						<image v-if="file1" :src="file1" mode="aspectFill"></image>
						<view v-else class="uni-icon uni-icon-plusempty"></view>
					</view>
					<view class="image-wrap" @click="upload(2)">
						<image v-if="file2" :src="file2" mode="aspectFill"></image>
						<view v-else class="uni-icon uni-icon-plusempty"></view>
					</view>
					<view class="image-wrap" @click="upload(3)">
						<image v-if="file3" :src="file3" mode="aspectFill"></image>
						<view v-else class="uni-icon uni-icon-plusempty"></view>
					</view>
				</view>
			</view> -->
			<view class="form-item upload">
				<view class="label">
					<text>上传身份证（正、反面）</text>
				</view>
				<view class="upload-wrap">
					<view class="image-wrap" @click="upload(4)">
						<image v-if="cardcons" :src="cardcons" mode="aspectFill"></image>
						<view v-else class="uni-icon uni-icon-plusempty"></view>
					</view>
					<view class="image-wrap" @click="upload(5)">
						<image v-if="cardpros" :src="cardpros" mode="aspectFill"></image>
						<view v-else class="uni-icon uni-icon-plusempty"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-wrap" v-if="!renzstatus">
			<button type="primary" @click="submit">提交</button>
		</view>
		<!-- 已经提交过审核 -->
		<view class="applyover" v-if="renzstatus">
			<view class="topbg">
				<image src="/static/img/applying.png"></image>
				<view class="applying_msg">
					<text class="msg_sty">主持人认证已提交，敬请耐心等待</text>
					<text class="msg_sty2">请联系主持人认证导师，进行视频面试！</text>
				</view>
			</view>
			<view class="qq_warp">
				<image class="qqimg" src="/static/img/share_qq.png"></image>导师QQ：{{qqnum}}
				<!-- <view></view> -->
			</view>
			<view class="bottom_warp">
				<view class="title_msg">面试准备</view>
				<view>1、着装干净整洁</view>
				<view>2、女生可淡妆，男生素颜</view>
				<view>3、有演唱、播音主持或舞蹈特长可准备一首歌曲</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myInfo: {},
				form: {
					name: '',
					tel: '',
					file1: '',
					file2: '',
					file3: '',
					occupation: '',
					cardcons: '',
					cardpros: '',
				},
				file1: '',
				file2: '',
				file3: '',
				cardcons: '',
				cardpros: '',
				qiniuToken: '',
				domain: '',
				renzstatus:false,  //主播认证状态
				qqnum:'',
			}
		},
		onLoad() {
			try {
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					this.myInfo = myInfo;
				}
			} catch (e) {
				console.log(e);
			}
		},
		onReady() {
			this.getQiniuToken();
			this.getStatus();
			this.getQq();
		},
		methods: {
			// 获取认证状态
			getStatus(){
				var that=this;
				that.$api.api.ajaxData({
					method: 'V1.AttestationStatus',
					uid: that.myInfo.id,
				}, res => {
					if (res.status) {
						
						if(!res.data || res.data.status==2){
							that.renzstatus=false;
							if(res.data.status==2){
								uni.showToast({
									title: '上次申请失败，请重新申请',
									position: 'bottom',
									icon: 'none'
								})
							}
						}else{
							that.renzstatus=true;
						}
					}
				})
			},
			// 获取导师QQ号码
			getQq: function () {
				this.$api.api.ajaxData({
					method: 'V1.GetConfig',
					config: 'love.tutor.qq',
				}, res => {
					if (res.status) {
						this.qqnum=res.data;
					}
				})
			},
			getQiniuToken: function () {
				this.$api.api.ajaxData({
					method: 'V1.QiniuToken',
					uid: this.myInfo.id,
					token: this.myInfo.token,
				}, res => {
					if (res.status) {
						this.qiniuToken = res.data.token
						this.domain = res.data.domain
					}
				})
			},
			
			upload: function (index) {
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					sizeType: ['original', 'compressed'],
					count: 1,
					success: res => {
						if (index == 1) {
							this.file1 = res.tempFilePaths[0]
						}
						if (index == 2) {
							this.file2 = res.tempFilePaths[0]
						}
						if (index == 3) {
							this.file3 = res.tempFilePaths[0]
						}
						if (index == 4) {
							this.cardcons = res.tempFilePaths[0]
						}
						if (index == 5) {
							this.cardpros = res.tempFilePaths[0]
						}
						this.uploadFile(res.tempFilePaths[0], index)
					}
				})
			},
			
			uploadFile: function (file, index) {
				var key = 'file_' + this.$api.api.getRandom(0, 100000000) + '-t_' + (+new Date());
				uni.showLoading({
					title: ''
				})
				var uploadTask = uni.uploadFile({
					url: this.QINUUPLOADURL,
					filePath: file,
					name: 'file',
					formData: {
						'token': this.qiniuToken,
						'key': key
					},
					success: res => {
				
						if (res.statusCode == 200) {
							let dataObject = JSON.parse(res.data)
							if (index == 1) {
								this.form.file1 = dataObject.key
							}
							if (index == 2) {
								this.form.file2 = dataObject.key
							}
							if (index == 3) {
								this.form.file3 = dataObject.key
							}
							if (index == 4) {
								this.form.cardcons = dataObject.key
							}
							if (index == 5) {
								this.form.cardpros = dataObject.key
							}
						} else {
							
							uni.showToast({
								title: '上传失败，请重试',
								position: 'bottom',
								icon: 'none'
							})
						}
					},
					fail: err => {
						console.error(err);
						uni.showToast({
							title: '上传失败，请重试',
							position: 'bottom',
							icon: 'none'
						})
					},
				});
				uploadTask.onProgressUpdate(res => {
					if (res.progress == 100) {
						uni.hideLoading()
					}
				});
			},
			
			submit: function () {
				var regex = /^(?=\d{11}$)^1(?:3\d|4[57]|5[^4\D]|66|7[^249\D]|8\d|9[189])\d{8}$/g;
				if (this.form.name == '') {
					uni.showToast({
						title: '请填写您的姓名',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (this.form.tel == '') {
					uni.showToast({
						title: '请填写您的手机号',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (!regex.test(this.form.tel)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (this.form.occupation == '') {
					uni.showToast({
						title: '请填写您的职业',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				// if (this.form.file1 == '' && this.form.file2 == '' && this.form.file3 == '') {
				// 	uni.showToast({
				// 		title: '请上传证件',
				// 		position: 'bottom',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				if (this.form.cardcons == '' || this.form.cardpros == '') {
					uni.showToast({
						title: '请上传身份证',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				uni.showLoading({
					title: ''
				});
				
				this.$api.api.ajaxData({
					method: 'V2.Apply',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					tel: this.form.tel,
					sex: this.myInfo.sex,
					name: this.form.name,
					age: this.myInfo.age,
					// file1: this.form.file1,
					// file2: this.form.file2,
					// file3: this.form.file3,
					occupation: this.form.occupation,
					cardcons: this.form.cardcons,
					cardpros: this.form.cardpros,
				}, res => {
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
						position: 'bottom',
						icon: 'none'
					});
					if (res.status) {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	
	@import '../../common/common.scss';
	
	
	.form-wrap {
		.form-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			background-color: #FFFFFF;
			padding: 0 20rpx;
			margin-bottom: 1rpx;
			&.upload {
				height: auto;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
			}
			.label {
				padding: 10rpx 0;
				text {
					font-size: 28rpx;
					color: $title-color;
				}
			}
			.input-wrap {
				flex: 1;
				input {
					font-size: 24rpx;
					text-align: right;
				}
				
			}
			.upload-wrap {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 10rpx 0 20rpx;
				.image-wrap {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 339rpx;
					height: 200rpx;
					border: 1rpx solid #ddd;
					border-radius: 10rpx;
					& + .image-wrap {
						margin-left: 20rpx;
					}
					image {
						width: 339rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
					.uni-icon-plusempty {
						font-size: 120rpx;
						color: #ddd;
					}
				}
			}
		}
	}

	.btn-wrap {
		padding: 100rpx;
	}
	.applyover{
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 999;
		top: 0;
		background-color: #fff;
		.topbg{
			background-color: #F8CE46;
			height: 400rpx;
			text-align: center;
			image{
				width: 140rpx;
				height: 110rpx;
				margin-top: 90rpx;
			}
			.applying_msg{
				color: #fff;
				margin-top: 10rpx;
				.msg_sty{
					font-size: 36rpx;
					line-height: 42rpx;
					display: block;
					width: 100%;
				}
				.msg_sty2{
					font-size: 30rpx;
					display: block;
					width: 100%;
				}
			}
		}
		.qq_warp{
			width: 420rpx;
			height: 120rpx;
			border-radius: 50rpx;
			font-size: 30rpx;
			color: #333;
			background-color: #fff;
			margin: -60rpx auto;
			text-align: center;
			line-height: 120rpx;
			.qqimg {
				
				width: 40rpx;
				height: 40rpx;
				display: inline-block;
				margin-right: 10rpx;
				vertical-align: middle;
				margin-top: -10rpx;
				// background-color: #ededed;
			    // color: #f06c7a;
				
			}
		}
		.bottom_warp{
			text-align: center;
			color: #666;
			font-size: 30rpx;
			margin-top: 100rpx;
			line-height: 40rpx;
			.title_msg{
				margin-bottom: 10rpx;
			}
		}
	}
</style>
